<template>

  <!--展示视频摘要图-->
  <section class="tab-summary-body">

    <!--若视频存在摘要图，则展示此容器-->
    <div v-if="summaryImage">

      <!--视频摘要图: 计算MinIO代理地址-->
      <van-image :src="minio(summaryImage)"/>

    </div>

    <!--若视频不存在摘要图，则展示此容器-->
    <div v-else>

      <!--视频摘要图: 本地默认视频摘要图-->
      <van-image :src="require('@/assets/default-summary.jpg')"/>

    </div>

  </section>

</template>

<script setup>
import {computed} from "vue";
import {MINIO_HOST} from "@/constant";

/* ==================== props ==================== */

// props: 接收父组件传递过来的值
let props = defineProps({
  summaryImage: {type: String, default: 'default-summary.jpg'}
});

/* ==================== computed ==================== */

// computed: 计算MinIO的代理地址，计算属性接收参数需要闭包
const minio = computed(() => src => MINIO_HOST + '/summary/' + src);
</script>

<style scoped>

</style>